﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="../backPage/css/reset.css" rel="stylesheet" />
    <link href="../backPage/css/iconfont.css" rel="stylesheet" />
    <link href="../backPage/css/index.css" rel="stylesheet" />
    <script src="../backPage/js/jquery-1.9.1.min.js"></script>
    <script src="../backPage/js/f.js"></script>
    <title>分类管理</title>

</head>
<body>
    <div class="PublicHead clearfix">
        <div class="leftBox clearfix">
            <div class="companyLogo">
                <!--<img src="../backPage/images/logo.jpg" />-->
            </div>
            <!--<i class="iconfont icon-caidan Js_MenuList"></i>-->

            <div class="companyText">
                篮球商城管理系统
            </div>
        </div>
        <div class="RightBox clearfix">
            <div class="UserPhotoBox">
                <div class="UserPic">
                    <img src="../backPage/images/user.jpg" />
                </div>
                <div class="UserName">
                    管理员
                </div>
            </div>
            <a href="index.html">
                <div class="dropOutBox">
                    <i class="iconfont icon-app_icons--">
                    </i>
                    <span>退出</span>
                </div>
            </a>
        </div>
    </div>

    <div class="PublicDownWhole clearfix">
        <!--左侧-->
        <div class="leftBox Js_leftBox">
            <ul>
                <a href="UserManagement.html"> <li><i class="iconfont icon-yonghuguanli"></i><span>用户管理</span></li></a>
                <a href="OrderManagement.html">
                    <li><i class="iconfont icon-tubiao_dingdan"></i><span>订单管理</span></li>
                </a>
                <a href="ClassificationManagement.html">
                    <li class="Select"><i class="iconfont icon-fenlei"></i><span>分类管理</span></li>
                </a>
                <a href="ProductManagement.html">      <li><i class="iconfont icon-weibiaoti1"></i><span>产品管理</span></li></a>
            </ul>
        </div>
        <!--右侧-->
        <div class="RightBox Js_RightBox">
            <div class="PublicContentBox">
                <!--公用指向页面名字-->
                <div class="PublicPointToAgeText">
                    <span class="span1">分类管理 </span> <span class="span2">后台分类管理列表</span>
                </div>
                <!--查询-->
                <!--<div class="InquireBox clearfix">
                    <div class="InquireleftBox">
                        <div class="Text">手机号：</div>
                        <div class="InputDiv">   <input class="phoneInput" placeholder="请输入你需要查询的手机号" /></div>
                    </div>
                    <div class="PublicBtnIcon Color1Btn fr">
                        <i class="iconfont icon-icon-chaxun"></i>
                        <span>查询</span>
                    </div>
                </div>-->
                <!--表修改-->
                <div class="InquireTableBox">
                    <div class="headbox">
                        <div class="headboxtext">
                            <span class="span1">后台分类管理列表</span>
                        </div>
                        <!--批量删除-->
                        <div onclick="batchDel()" class="PublicBtnIcon Color5Btn">
                            <i class="iconfont  icon-shanchu"></i>
                            <span>批量删除</span>
                        </div>

                        <div class="PublicBtnIcon Color2Btn fr Js_edit">
                            <i class="iconfont icon-changyongtubiao-mianxing-"></i>
                            <span>添加</span>
                        </div>
                    </div>

                    <!--查询到的表格-->

                    <div class="InquireSelectTable">
                        <table class="PublicTableCss">
                            <thead>
                                <tr>
                                    <td>
                                        <input id="inputcheck" class="inputcheck" type="checkbox" value="0" name="inputcheck" />
                                        <label for="inputcheck" onclick="selAll()"></label>
                                        <span>全选</span>
                                    </td>
                                    <td>序号</td>
                                    <td>品牌名称</td>
                                    <td>品牌描述</td>
                                    <td>操作</td>
                                </tr>

                            </thead>
                            <tbody id="brand-management-tbody">


                            </tbody>
                        </table>

                    </div>
                    <!--分页-->
                    <div class="PageNumber">
                        <div class="NumbersBox">
                            <ul id="brand-management-page">
                                <li class="Select">1</li>
                                <li class="">2</li>
                                <li class="">...</li>
                                <li class="">4</li>
                                <li class="">5</li>
                            </ul>
                        </div>
                    </div>


                </div>
            </div>

        </div>
    </div>


    <!-- alert通用 提示是否删除-->
    <div class="PublicFloatBox f_delete">
        <div class="f_MiddleBox wid260">
            <div class="f_Head">
                <span>提示消息</span>
                <i class="Js_closeBtn iconfont icon-buoumaotubiao20 fr"></i>
            </div>
            <div class="f_content clearfix">
                <!--提示消息内容-->
                <div class="f_someText">
                    <i class="iconfont icon-tishi"></i>
                    <span>确定删除此信息？</span>
                </div>
                <!--按钮-->
                <div class="f_pormatBtn  clearfix">
                    <div onclick="delBrand()" class="f_pormatBtn1">
                        确定
                    </div>
                    <div onclick="cancel()" class="f_pormatBtn2">
                        删除
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--添加品牌浮层-->
    <div class="PublicFloatBox adduser">
        <div class="f_MiddleBox wid400">
            <div class="f_Head">
                <span>添加品牌</span>
                <i class="Js_closeBtn iconfont icon-buoumaotubiao20 fr"></i>
            </div>
            <form id="add-brand-form" method="post">
                <div class="f_content">
                    <div class="f_alonediv">
                        <div class="f_alone_name">
                            品牌名称:
                        </div>
                        <div class="f_alone_input">
                            <input name="brandName" class="f_p_input" />
                        </div>
                        <!--提示消息-->
                        <div hidden="hidden" class="f_pormat">
                            请输入品牌名称
                        </div>
                    </div>
                    <div class="f_alonediv">
                        <div class="f_alone_name">
                            品牌描述:
                        </div>
                        <div class="f_alone_input">
                            <input name="brandDescription" class="f_p_input" />
                        </div>
                        <!--提示消息-->
                        <div hidden="hidden" class="f_pormat">
                            请输入品牌描述
                        </div>
                    </div>
                    <div class="f_alonediv1">
                        <div class="f_alone_name">
                        </div>
                        <div class="f_alone_input1">
                            <!--publicbtn-->
                            <div class="publicf_btn">
                                <div onclick="addBrand()" class="publicf_btn1">
                                    确定
                                </div>
                                <div class="publicf_btn2 fr Js_closeBtn">
                                    取消
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>

    <!--修改品牌浮层-->
    <div class="PublicFloatBox editUser">
        <div class="f_MiddleBox wid400">
            <div class="f_Head">
                <span>修改品牌</span>
                <i class="Js_closeBtn iconfont icon-buoumaotubiao20 fr brandEditClose"></i>
            </div>
            <form id="update-brand-form" method="post">
                <input hidden="hidden" name="id" id="id">
                <div class="f_content">
                    <div class="f_alonediv">
                        <div class="f_alone_name">
                            品牌名称:
                        </div>
                        <div class="f_alone_input">
                            <input id="brandName" name="brandName" class="f_p_input" />
                        </div>
                        <!--提示消息-->
                        <div hidden="hidden" class="f_pormat">
                            请输入品牌名称
                        </div>
                    </div>
                    <div class="f_alonediv">
                        <div class="f_alone_name">
                            品牌描述:
                        </div>
                        <div class="f_alone_input">
                            <input id="brandDescription" name="brandDescription" class="f_p_input" />
                        </div>
                        <!--提示消息-->
                        <div hidden="hidden" class="f_pormat">
                            请输入品牌描述
                        </div>
                    </div>
                    <div class="f_alonediv1">
                        <div class="f_alone_name">
                        </div>
                        <div class="f_alone_input1">
                            <!--publicbtn-->
                            <div class="publicf_btn">
                                <div onclick="updateBrand()" class="publicf_btn1">
                                    确定
                                </div>
                                <div class="publicf_btn2 fr Js_closeBtn brandEditClose">
                                    取消
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>

    <!--返回顶部-->
    <a href="javaScript:void();" class="back-to-top"><i class="iconfont icon-fanhuidingbu"></i> </a>
</body>

<script type="text/javascript">

    // 页面加载完成事件
    $(function () {
        $.ajax({
            "url":"/brand/brand_page_loading.do",
            "data":{page:1, size:5},
            "type":"post",
            "dataType":"json",
            "success":function(json){
                console.log(json);
                if (json.code == 200) {
                    // 用户数据集
                    var data = json.data.list;
                    console.log(data);
                    for (var i=0; i<data.length; i++) {
                        var tr = '<tr><td><input id="chack'+data[i].id+'" class="inputcheck" type="checkbox" name="inputcheck" value="'+data[i].id+'" />' +
                            '                            <label for="chack'+data[i].id+'"></label></td><td>'+(i+1)+'</td><td>'+data[i].brandName+'</td>' +
                            '                            <td>'+data[i].brandDescription+'</td><td>' +
                            '                            <div onclick="edit('+data[i].id+')" class="PublicTableBtnIcon Color3Btn Js_edit">' +
                            '                            <i class="iconfont icon-tubiaozhizuomobanyihuifu-"></i>' +
                            '                            <span>编辑</span></div>' +
                            '                            <div onclick="del('+data[i].id+')" class="PublicTableBtnIcon Color4Btn Js_delete">' +
                            '                            <i class="iconfont icon-shanchu"></i>' +
                            '                            <span>删除</span></div></td></tr>';
                        $("#brand-management-tbody").append(tr);
                    }

                    // 在页码前添加上一页按钮
                    if(json.data.hasPreviousPage){
                        $("#brand-management-page").before('<div id="top-page" onclick="sybase('+(json.data.pageNum-1)+')" class="LeftArrow">上一页</div>');
                    }
                    var pageSums = json.data.navigatepageNums;
                    console.log(pageSums);
                    // 清空分页列表
                    $("#brand-management-page").empty();
                    // 遍历分页
                    for (var i=0; i<pageSums.length; i++ ) {
                        var li = '';
                        if (i == 0){
                            li = '<li class="Select" onclick="sybase('+(i+1)+')">'+pageSums[i]+'</li>';
                        }else{
                            li = '<li class="" onclick="sybase('+(i+1)+')">'+pageSums[i]+'</li>';
                        }
                        $("#brand-management-page").append(li);
                    }
                    // 在页码后添加下一页按钮
                    if(json.data.hasNextPage){
                        $("#brand-management-page").after('<div id="dow-page" onclick="sybase('+(json.data.pageNum+1)+')" class="RightArrow ">下一页</div>');
                    }
                }else{
                    alert(json.message);
                }
            }
        });
    });

    // 添加品牌数据
    function addBrand() {
        $.ajax({
            url: "/brand/add_brand.do",
            type: "post",
            data: $("#add-brand-form").serialize(),
            dataType: "json",
            success: function (json) {
                console.log(json);
                if (json.code != 200) {
                    alert(json.message);
                }else{
                    //location.reload();
                }
            }
        });
    }

    // 点击分页按钮查询用户数据
    function sybase(pageSum) {
        // 发起post请求
        $.get("/brand/brand_page_loading.do",{page: pageSum, size: 5},function(json) {
            // 判断服务器返回的状态
            if (json.code == 200) {
                // 用户数据集
                var data = json.data.list;
                console.log(data);
                // 清空表格
                $("#brand-management-tbody").empty();
                for (var i=0; i<data.length; i++) {
                    var tr = '<tr><td><input id="chack'+data[i].id+'" class="inputcheck" type="checkbox" name="inputcheck" value="'+data[i].id+'" />' +
                        '                            <label for="chack'+data[i].id+'"></label></td><td>'+(i+1)+'</td><td>'+data[i].brandName+'</td>' +
                        '                            <td>'+data[i].brandDescription+'</td><td>' +
                        '                            <div onclick="edit('+data[i].id+')" class="PublicTableBtnIcon Color3Btn Js_edit">' +
                        '                            <i class="iconfont icon-tubiaozhizuomobanyihuifu-"></i>' +
                        '                            <span>编辑</span></div>' +
                        '                            <div onclick="del('+data[i].id+')" class="PublicTableBtnIcon Color4Btn Js_delete">' +
                        '                            <i class="iconfont icon-shanchu"></i>' +
                        '                            <span>删除</span></div></td></tr>';
                    $("#brand-management-tbody").append(tr);
                }
                // 在页码前添加上一页按钮
                if(json.data.hasPreviousPage){
                    // 删除哥哥元素
                    $("#top-page").remove();
                    $("#brand-management-page").before('<div id="top-page" onclick="sybase('+(json.data.pageNum-1)+')" class="LeftArrow">上一页</div>');
                }
                var pageSums = json.data.navigatepageNums;
                console.log(pageSums);
                // 清空分页列表
                $("#brand-management-page").empty();
                // 遍历分页
                for (var i=0; i<pageSums.length; i++ ) {
                    var li = '';
                    if (json.data.pageNum == (i + 1)){
                        li = '<li class="Select" onclick="sybase('+(i+1)+')">'+pageSums[i]+'</li>';
                    }else{
                        li = '<li class="" onclick="sybase('+(i+1)+')">'+pageSums[i]+'</li>';
                    }
                    $("#brand-management-page").append(li);
                }
                // 在页码后添加下一页按钮
                if(json.data.hasNextPage){
                    // 删除弟弟元素
                    $("#dow-page").remove();
                    $("#brand-management-page").after('<div id="dow-page" onclick="sybase('+(json.data.pageNum+1)+')" class="RightArrow ">下一页</div>');
                }

            }else{
                alert(json.message);
            }
        }, "json");
    }

    // 多选框的全选
    function selAll() {
        var selAll = document.getElementById("inputcheck");
        selAll.checked = !selAll.checked;
        // 获取多选框对象
        var ches = document.getElementsByName("inputcheck");
        for(var i=0;i<ches.length;i++){
            ches[i].checked = !ches[i].checked;
        }
    }

    // 批量删除
    function batchDel() {
        // 获取选中的复选框的值
        var ids = new Array();
        $('input[name="inputcheck"]:checked').each(function(){
            // 判断是有全选按钮的值，如果有则不添加
            if ($(this).val() != 0) {
                ids.push($(this).val());//向数组中添加元素
            }
        });
        console.log(ids);
        // 调用后端接口执行批量删除操作
        $.ajax({
            url:"/brand/batch_del_brand.do",
            type: "post",
            traditional:true,
            data: {ids: ids},
            dataType: "json",
            success: function (json) {
                // 判断状态。
                if (json.code == 200) {
                    location.reload();
                }else{
                    alert(json.message);
                }
            }
        });
    }


    // 定义全局的uid
    var id = "";

    // 修改按钮(弹框)
    function edit(uid){
        id = uid;
        // 发起post请求
        $.post("/brand/edit_brand_find_data.do", {id: uid}, function (json) {
            console.log(json);
            // 判断服务器返回的状态码
            if (json.code == 200) {
                // 为修改的页面赋默认值
                $("#id").val(json.data.id);
                $("#brandName").val(json.data.brandName);
                $("#brandDescription").val(json.data.brandDescription);
            }else{
                alert(json.message);
            }
        }, "json");

        // 弹出弹出层
        $(".editUser").fadeIn(200);
    }
    // 执行修改操作
    function updateBrand() {
        // 发送Ajax请求
        $.ajax({
            url: "/brand/admin_update_brand.do",
            type: "post",
            data: $("#update-brand-form").serialize(),
            dataType: "json",
            success: function (json) {
                if (json.code == 200) {
                    location.reload();
                }else{
                    alert(json.message);
                }
            }
        });
    }

    // 删除按钮(弹框)
    function del(uid) {
        id = uid;
        $(".f_delete").fadeIn(200);
    }
    // 删除操作
    function delBrand() {
        // 发起post请求
        $.post("/brand/admin_del_brand.do", {id: id}, function (json) {
            // 判断响应状态码
            if (json.code == 200) {
                location.reload();
            }else{
                alert(json.message);
            }
        }, "json");
    }
    // 取消删除
    function cancel() {
        // 关闭弹出层
        $(".adduser,.f_delete").fadeOut(200);
    }

    $(".brandEditClose").click(function () {
        $(".editUser").fadeOut(200);
    });

</script>

</html>